<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="admin/header::header-fragment">
    <link rel="stylesheet" th:href="@{/admin/plugins/swiper/css/swiper.min.css}"/>
    <!--引用百度地图API-->
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        .iw_poi_title {
            color: #CC5522;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
            padding-right: 13px;
            white-space: nowrap
        }

        .iw_poi_content {
            font: 12px arial, sans-serif;
            overflow: visible;
            padding-top: 4px;
            white-space: -moz-pre-wrap;
            word-wrap: break-word
        }
    </style>
</header>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- 引入页面头header-fragment -->
    <div th:replace="admin/header::header-nav"></div>
    <!-- 引入工具栏sidebar-fragment -->
    <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
            </div><!-- /.container-fluid -->
        </div>
        <!-- Main content -->
        <div class="content">
            <div class="card card-primary card-outline">

                <div class="card-header">
                    <h3 class="card-title">首页</h3>
                </div> <!-- /.card-body -->
                <div class="card-body">
                    <div class="panel panel-default">
                        <div style="padding: 10px 0 20px 10px;">

                            <!-- 统计开始  -->
                            <div>
                                <div>
                                    <h4 class="text-md text-dark">各分类商品占比</h4>
                                    <div id="chart_jwdt" style="display:inline-block"></div>
                                    <!--                                        <div id="chart_jwdt" style="width:50%;height: 300px;display:inline-block"></div>-->
                                    <!--                                        <h4 class="text-md text-dark">订单价格占比</h4>-->
                                    <div id="chart_jcys" style="display:inline-block;margin-left:10px;"></div>
                                    <!--                                        <div id="chart_jcys" style="width:50%;height: 300px;display:inline-block;margin-left:10px;"></div>-->
                                </div>
                                <div class="col-xs-12">
                                    <h4 class="text-md text-dark">考核情况</h4>
                                    <div id="chart_khqk" style="height: 190px"></div>
                                </div>
                            </div>
                            <!--   统计结束 -->

                            <!--百度地图div 开始-->
                            <div>
                                <div class="col-xs-12">
                                    <h4 class="text-md text-dark">工作地点</h4>
                                    <div style="width:100%;height:550px;border:#ccc solid 1px;"
                                         id="dituContent"></div>
                                </div>
                            </div>
                            <!--百度地图div 结束-->
<!--                            <a target="_blank">-->
<!--                                <p>这里做一个 可视化 数据展示 </p>-->
<!--                                <ul>-->
<!--                                    <li>柱形图</li>-->
<!--                                    <li>扇形图</li>-->
<!--                                    <li>折线图</li>-->
<!--                                </ul>-->
<!--                                <p>购物页面底部 会 加 一个 百度地图 可拖动 活的 </p>-->
<!--                                <p>以及 意见反馈 功能 </p>-->
<!--                                <p>如果有时间 再 完善 评价 功能 </p>-->
<!--                                <p>然后 完善页面样式 与内容 </p>-->
<!--                            </a>-->
                            <h3>联系作者</h3>
                            <ul>
                                <li>我的邮箱：xxxxxxxxx@qq.com</li>
                                <li>QQ技术交流群：xxxxxxxx <a target="_blank"
                                                        href="http://wpa.qq.com/msgrd?v=3&uin=911197608&site=qq&menu=yes"><img
                                        border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="SpringBoot技术交流"
                                        title="SpringBoot技术交流"></a>
                                </li>
                            </ul>
                            <ul>
                                <li><a target="_blank">中华美食 in GitHub</a></li>
                                <li><a target="_blank">中华美食 in Gitee</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- 引入页脚footer-fragment -->
    <div th:replace="admin/footer::footer-fragment"></div>
</div>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/admin/dist/js/adminlte.min.js}"></script>
<script th:src="@{/admin/plugins/swiper/js/swiper.min.js}"></script>
<script th:src="@{/admin/plugins/highcharts/js/highcharts.js}"></script>
</body>

<!--exchart 开始-->
<script>
    $(function () {
        // 图表配置

        // 基础要素总数
        $('#chart_jwdt').highcharts({
            chart: {
                type: 'pie',
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            colors: ["#3aa0ff", "#4dcb73", "#fad337", "#f2637b", "#718dfc",
                "#4fcbd6", "#77dfb7", "#aaeeee"],
            plotOptions: {
                pie: {
                    size: '60%',
                    // innerSize:'60%',
                    allowPointSelect: true,
                    showInLegend: false
                },
                series: {
                    dataLabels: {
                        enabled: true,
                        color: '#666',
                        fontWeight: 100,
                        format: '{point.name}: <br>{point.y:.1f}%'
                    }
                }
            },
            tooltip: {
                headerFormat: null,
                pointFormat: '<span style="color:{point.color}">{point.name} </span><br> <b>{point.y}</b><b style="color: #f00;"> {point.percentage:.1f}%</b><br/>'
            },
            series: [{
                name: '商品总数',
                colorByPoint: true,
                data: [{
                    name: '处理中',
                    y: 38
                }, {
                    name: '已完成',
                    y: 28,
                }, {
                    name: '未处理',
                    y: 20,
                }, {
                    name: '未下发',
                    y: 10,
                }, {
                    name: '已改派',
                    y: 6,
                }]
            }]
        });

        // 基础要素
        $('#chart_jcys').highcharts({
            chart: {
                type: 'pie',
            },
            title: {
                text: '商品总数',
                floating: true,
                align: 'left',
                x: 0,
                y: 20,
                style: {
                    color: '#777',
                    fontSize: 14
                }
            },
            subtitle: {
                floating: true,
                align: 'left',
                x: 65,
                y: 20,
                style: {
                    fontSize: 18,
                    color: '#6775ff',
                    fontWeight: 'bold'
                }
            },
            credits: {
                enabled: false
            },
            colors: ["#3aa0ff", "#37cbcb", "#4dcb73", "#fad337", "#f2637b", "#718dfc",
                "#4fcbd6", "#77dfb7", "#aaeeee"],
            plotOptions: {
                pie: {
                    size: '90%',
                    innerSize: '60%',
                    allowPointSelect: true,
                    showInLegend: false
                },
                series: {
                    dataLabels: {
                        enabled: false,
                        format: '{point.name}: {point.y:.1f}%'
                    }
                }
            },
            tooltip: {
                // headerFormat: '<span style="font-size:11px;">{series.key}</span><br>',
                headerFormat: null,
                pointFormat: '<span style="color:{point.color}">{point.name} </span><br> <b>{point.y}</b><b style="color: #f00;"> {point.percentage:.1f}%</b><br/>'
            },
            series: [{
                name: '台账总数',
                colorByPoint: true,
                data: [{
                    name: '重点人员',
                    y: 24460,
                }, {
                    name: '重点物品',
                    y: 63974,
                }, {
                    name: '重点部位',
                    y: 779741,
                }, {
                    name: '关注事件',
                    y: 0,
                }, {
                    name: '关注情况',
                    y: 0,
                }, {
                    name: '关注组织',
                    y: 7946,
                }]
            }]
        }, function (c) { // 图表初始化完毕后的回调函数
            var total = c.series[0].total;
            // 动态设置副标题内容
            c.setSubtitle({
                text: total
            });
        });

        // 台账管理 - 台账任务统计
        $('#chart_khqk').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            colors: ['#1890ff', '#2fc25b'],
            xAxis: {
                tickWidth: 0,
                lineWidth: 1,
                categories: ['2019年8月', '2019年9月', '2019年10月', '2019年11月', '2019年12月']
            },
            yAxis: {
                title: {
                    text: null
                },
                gridLineWidth: 1,
                gridLineDashStyle: 'Dash',
                labels: {
                    enabled: true
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '近期得分动态',
                data: [358, 374, 391, 450, 320]
            }]
        });

    })
</script>
<!--exchart 结束-->

<!--百度地图引入 开始-->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(117.116042, 39.076941);//定义一个中心点坐标
        map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }


    initMap();//创建和初始化地图
</script>
<!--百度地图引入 结束-->
</html>
